<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="org-container">
            <div class="container-left">
                <div class="container-left-body">
                    <el-button class="add-btn" type="primary" @click="addItem">{{ _isOperation ? "添加运营组" : "添加部门" }}</el-button>
                    <div class="scroll-box">
                        <org-tree
                            ref="OrgTree"
                            :treeData="treeData"
                            :value="orgId"
                            :clickNodeExpand="false"
                            :filterWord="filterInput"
                            :canEdit="true"
                            :canDrag="true"
                            :maxLevel="2"
                            :noRegional="_isOperation"
                            @handleItem="handleItem"
                            @clickNode="clickNode"
                            @addDepartment="addDepartment"
                            @deleteDepartment="deleteDepartment"
                        />
                    </div>
                </div>
            </div>
            <div class="container-right">
                <page-search>
                    <page-search-column class="fixed-column">
                        <page-search-item>
                            <el-input class="pbb__search-input" v-model="name" placeholder="姓名/账号"></el-input>
                        </page-search-item>
                        <page-search-item>
                            <el-button type="primary" @click="getTable">搜索</el-button>
                        </page-search-item>
                        <page-search-item>
                            <el-button type="primary" @click="orgToAdd" :disabled="!orgId">添加成员</el-button>
                        </page-search-item>
                        <page-search-item>
                            <el-button @click="setPrincipal" :disabled="!orgId">设置负责人</el-button>
                        </page-search-item>
                    </page-search-column>
                </page-search>
                <div class="container-right-body">
                    <el-table
                        v-show="tableData.length"
                        :data="tableData"
                        row-key="id"
                        class="org-table pbb__table"
                        header-cell-class-name="pbb__table-thead"
                        cell-class-name="pbb__table-thead-cell"
                        row-class-name="pbb__table-thead-row"
                        ref="multipleTable"
                        style="width: 100%;height: 100%;overflow-y: auto;"
                        @selection-change="onTableSelectionChange"
                    >
                        <el-table-column
                            v-if="_isOperation"
                            align="center"
                            type="selection"
                            :reserve-selection="true"
                            width="60"
                        >
                        </el-table-column>
                        <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                            width="60"
                        >
                        </el-table-column>
                        <el-table-column prop="name" label="姓名">
                            <template slot-scope="scope">
                                {{ scope.row.name || "-" }}
                                <template v-if="scope.row.departmentAdmin">
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        content="该成员是负责人"
                                        placement="top"
                                    >
                                        <i class="el-icon-info"></i>
                                    </el-tooltip>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="departmentName" label="部门">
                        </el-table-column>
                        <el-table-column prop="position" label="职位">
                        </el-table-column>
                        <el-table-column prop="tel" label="电话">
                        </el-table-column>
                        <el-table-column prop="roleNames" label="角色">
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                {{ scope.row.status === 1 ? "正常" : "冻结" }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            class-name="operate"
                            min-width="180"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleEdit(scope.row)"
                                    >编辑</el-button
                                >
                                <el-divider direction="vertical"></el-divider>
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="showSetDepartment(scope.row)"
                                    >调整部门</el-button
                                >
                                <el-divider direction="vertical"></el-divider>
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="resetPassword(scope.row)"
                                    >重置密码</el-button
                                >
                                <el-divider direction="vertical"></el-divider>
                                <el-button
                                    size="mini"
                                    type="text"
                                    v-if="scope.row.status === 1"
                                    @click="operateMember(scope.row, 'freeze')"
                                    >冻结</el-button
                                >
                                <el-button
                                    size="mini"
                                    type="text"
                                    v-else
                                    @click="
                                        operateMember(scope.row, 'unfreeze')
                                    "
                                    >解除</el-button
                                >
                                <el-divider direction="vertical"></el-divider>
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="operateMember(scope.row, 'delete')"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <ask-empty-text
                        style="min-height: 300px;"
                        v-if="tableData.length === 0"
                    >
                    </ask-empty-text>
                </div>
                <div class="page-base-footer">
                    <div class="page-base-footer__right" v-if="_isOperation">
                        <div class="num-box">
                            已选<span>{{ batchList.length }}</span
                            >条
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <el-dropdown
                            trigger="click"
                            @command="handleBatchClick"
                        >
                            <el-button class="pbb__search-btn">
                                批量操作<i
                                    class="el-icon-arrow-down el-icon--right"
                                ></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    icon="el-icon-setting"
                                    command="changeData"
                                    :disabled="
                                        batchList.length === 0 ||
                                            !canBatch.changeData
                                    "
                                >
                                    批量修改数据范围
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <pagination
                        :total="total"
                        :page.sync="pageIndex"
                        :limit.sync="pageSize"
                        @pagination="getTable"
                    />
                </div>
                <el-dialog
                    :visible.sync="dialogVisible"
                    custom-class="set-department"
                    :destroy-on-close="true"
                    :append-to-body="true"
                    title="调整部门"
                    center
                    width="30%"
                >
                    <div class="set-department-container">
                        <!--                        <div class="title"><span>调整部门</span></div>-->
                        <p class="old">原部门 {{ nowSetName }}</p>
                        <p class="new">请选择要调整到的新部门</p>
                        <div class="scroll-box">
                            <org-tree
                                ref="OrgTreeSet"
                                :treeData="treeData"
                                :clickNodeExpand="false"
                                :noAll="true"
                                @clickNode="clickSetNode"
                            />
                        </div>
                    </div>
                    <div
                        slot="footer"
                        class="dialog-footer set-department-footer"
                    >
                        <el-button @click="closeSetDepartment">取 消</el-button>
                        <el-button type="primary" @click="saveSetDepartment"
                            >确 定</el-button
                        >
                    </div>
                </el-dialog>
                <el-dialog
                    :close-on-click-modal="false"
                    :visible.sync="showReset"
                    custom-class="reset-popup"
                    title="重置密码"
                    center
                >
                    <div class="change-password-container">
                        <!--                        <div class="title"><span>重置密码</span></div>-->
                        <validation-observer
                            ref="observerRef"
                            v-slot="{ handleSubmit }"
                            slim
                        >
                            <el-form
                                class="custom-form change-password-form"
                                label-width="0"
                                ref="passwordFormRef"
                            >
                                <validation-provider
                                    name="resetForm.name"
                                    :rules="'required'"
                                    :customMessages="{ required: '请输入姓名' }"
                                    v-slot="{ errors }"
                                    slim
                                >
                                    <el-form-item required>
                                        <div
                                            class="cf__group"
                                            :class="{
                                                error: errors.length > 0
                                            }"
                                        >
                                            <div class="cf__group-info">
                                                <span
                                                    ><i
                                                        class="el-icon-user-solid"
                                                    ></i
                                                ></span>
                                                <el-input
                                                    placeholder="请输入姓名"
                                                    v-model="resetForm.name"
                                                    disabled
                                                ></el-input>
                                            </div>
                                            <div class="cf__group-tips">
                                                <template
                                                    v-if="errors.length > 0"
                                                >
                                                    {{ errors[0] }}
                                                </template>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </validation-provider>
                                <validation-provider
                                    name="resetForm.tel"
                                    :rules="'required'"
                                    :customMessages="{
                                        required: '请输入联系电话'
                                    }"
                                    v-slot="{ errors }"
                                    slim
                                >
                                    <el-form-item required>
                                        <div
                                            class="cf__group"
                                            :class="{
                                                error: errors.length > 0
                                            }"
                                        >
                                            <div class="cf__group-info">
                                                <span
                                                    ><i
                                                        class="el-icon-phone"
                                                    ></i
                                                ></span>
                                                <el-input
                                                    placeholder="请输入联系电话"
                                                    v-model="resetForm.tel"
                                                    disabled
                                                ></el-input>
                                            </div>
                                            <div class="cf__group-tips">
                                                <template
                                                    v-if="errors.length > 0"
                                                >
                                                    {{ errors[0] }}
                                                </template>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </validation-provider>
                                <validation-provider
                                    name="resetForm.password"
                                    :rules="'required|customPassword'"
                                    :customMessages="{
                                        required:
                                            '请设置6~12位数字字母组合新密码',
                                        customPassword:
                                            '请设置6~12位数字字母组合新密码'
                                    }"
                                    v-slot="{ errors }"
                                    slim
                                >
                                    <el-form-item required>
                                        <div
                                            class="cf__group"
                                            :class="{
                                                error: errors.length > 0
                                            }"
                                        >
                                            <div class="cf__group-info">
                                                <span>
                                                    <icon-svg
                                                        name="icon-lock"
                                                    ></icon-svg>
                                                </span>
                                                <el-input
                                                    placeholder="请设置6~12位数字字母组合新密码"
                                                    v-model="resetForm.password"
                                                    autocomplete="new-password"
                                                    show-password
                                                ></el-input>
                                            </div>
                                            <div class="cf__group-tips">
                                                <template
                                                    v-if="errors.length > 0"
                                                >
                                                    {{ errors[0] }}
                                                </template>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </validation-provider>
                                <el-form-item class="resetPassword-btn">
                                    <el-button @click="closeReset"
                                        >取 消</el-button
                                    >
                                    <el-button
                                        class="submit-change-password"
                                        type="primary"
                                        @click="handleSubmit(submit)"
                                    >
                                        提交
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </validation-observer>
                    </div>
                </el-dialog>
            </div>
        </div>
        <el-dialog
            title="数据范围"
            center
            width="30%"
            :close-on-click-modal="false"
            :visible.sync="showRangeDialog"
            @close="closeRangeDialog"
        >
            <el-form
                ref="dataRangeForm"
                :model="dataRangeForm"
                :rules="dataRangeFormRules"
            >
                <el-form-item label="数据范围" prop="dataRange">
                    <ask-city-no-relation
                        cityQuery="authNoVillage"
                        v-model="dataRangeForm.dataRange"
                        :showIndex="4"
                        multiple
                        :showOperate="false"
                        @area-change="handleChange"
                    ></ask-city-no-relation>
                    <p class="tips">设置人员查看的额外区镇数据</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeRangeDialog">取 消</el-button>
                <el-button type="primary" @click="saveRange">确 定</el-button>
            </div>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import OrgTree from "@/components/org-tree/index.vue";
import { dialogDepartment } from "./components/home/department";
import { dialogPrincipal } from "./components/home/principal";
import { State } from "vuex-class";
import { ValidationObserver, ValidationProvider } from "vee-validate";

@Component({
    components: {
        OrgTree,
        ValidationProvider,
        ValidationObserver
    }
})
export default class OrgHome extends Vue {
    @State(state => state.authArea) authArea: any;
    // 当前用户所处层级菜单
    get client() {
        return this.$getUserLevel(this.authArea && this.authArea.orgCategoryId)
            .name;
    }

    get _isOperation() {
        return ["ADMIN", "OPERATION_ADMIN", "OPERATION"].includes(this.client);
    }

    // 批量操作数据集合
    batchList: any[] = [];
    canBatch: any = {
        // 是否可以批量修改数据范围
        changeData: false
    };

    // 当前组织id
    orgId = "";
    // 当前组织数据
    currentNode: any = {};
    // 树结构数据
    treeData: any = [];
    // 过滤部门
    filterInput = "";
    // 显示调整部门弹窗
    dialogVisible = false;
    // 当前调整部门成员ID
    nowSetId = "";
    // 当前调整部门成员原部门
    nowSetName = "";
    // 调整选中部门id
    newSetDepartmentId = "";
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [];
    // 显示添加标签弹窗
    showReset = false;

    // 修改密码
    setPwdId = "";
    // 显示调整数据范围
    showRangeDialog = false;

    dataRangeForm: any = {
        dataRange: [],
        dataGovernments: []
    };

    resetForm: any = {
        id: "",
        password: "",
        name: "",
        tel: ""
    };

    name = ""

    dataRangeFormRules = {
        dataRange: [
            { required: true, message: "请选择范围", trigger: "change" }
        ]
    };

    created() {
        if (this.$route.query.cityCode) {
            this.initPage();
        }
        this.getTree();
    }

    activated() {
        this.initPage();
        this.getTable();
    }

    handleBatchClick(command: any) {
        if (command === "changeData") {
            this.showRange();
        }
    }

    // 表格选中修改
    onTableSelectionChange(selectList: any[]) {
        const changeDataList = selectList;
        this.canBatch.changeData = changeDataList.length === selectList.length;
        this.batchList = selectList;
    }

    // 初始化传值的数据
    initPage() {
        if (this.$route.query.cityCode) {
            this.total = 0;
            this.pageSize = 10;
            this.pageIndex = 1;
            this.tableData = [];
        }
    }

    // 提交重置密码
    async submit() {
        const { id, password } = this.resetForm;
        const res = await this.$server["org/reset/password"]({
            data: {
                id,
                password
            }
        });
        if (res.data.code === 200) {
            this.closeReset();
            this.$message.success("密码重置成功");
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 重置密码
    resetPassword(row: any) {
        this.showReset = true;
        this.resetForm = {
            id: row.id,
            password: "",
            name: row.name,
            tel: row.tel
        };
    }

    // 关闭重置密码弹框
    closeReset() {
        this.showReset = false;
        (this.$refs.passwordFormRef as any).resetFields();
    }

    // 添加一级部门
    addItem() {
        (this.$refs.OrgTree as any).addItem();
    }

    // 获取部门树
    async getTree() {
        const res = await this.$server["org/getDepartmentListOperate"]({
            data: {
                governmentId: this.authArea.governmentId
            }
        });
        if (res.data.code === 200) {
            this.orgId = "";
            this.currentNode = {};
            this.treeData = res.data.data;
            this.total = 0;
            this.pageSize = 10;
            this.pageIndex = 1;
            this.tableData = [];
            if (res.data.data.length) {
                this.orgId = res.data.data[0].id;
                this.currentNode = res.data.data[0];
                this.getTable();
            }
        } else {
            this.orgId = "";
            this.currentNode = {};
            this.treeData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 点击节点获取列表
    clickNode(data: any) {
        const { id } = data;
        if (this.orgId !== id) {
            (this.$refs.multipleTable as any).clearSelection();
        }
        this.currentNode = data;
        this.orgId = id;
        this.getTable();
    }

    // 添加/编辑部门
    async addDepartment(data: any) {
        const { id, name, tier, parentId, tel, description } = data;
        const response: any = await this.$server["org/addUpdate"]({
            data: {
                id,
                name,
                tier,
                parentId,
                tel,
                description
            }
        });
        if (response.data.code === 200) {
            this.getTree();
        } else {
            this.$message.error(response.data.message || "接口请求错误!");
        }
    }

    // 删除部门
    async deleteDepartment(data: any, callback: any) {
        let flag = false;
        this.$confirm("是否确定要删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["org/deleteOrg"]({
                    data: {
                        id: data.id
                    }
                });
                if (res.data.code === 200) {
                    flag = true;
                    if (data.id === this.orgId) {
                        this.clickNode(this.treeData[0]);
                    }
                    callback(flag);
                } else {
                    this.$message.error(
                        res.data.message || "接口请求错误!"
                    );
                }
            })
            .catch(() => {
                callback(flag);
            });
    }

    // 添加成员
    orgToAdd() {
        const node = (this.$refs.OrgTree as any).getNode(this.orgId);
        this.$router.push({
            path: "/organization/add",
            query: { orgId: this.orgId, departmentName: node.data.name }
        });
    }

    // 打开调整部门弹窗
    showSetDepartment(row: any) {
        this.dialogVisible = true;
        this.nowSetId = row.id;
        this.nowSetName = row.departmentName;
    }

    // 关闭调整部门弹窗
    closeSetDepartment() {
        this.dialogVisible = false;
        this.nowSetId = "";
        this.nowSetName = "";
        this.newSetDepartmentId = "";
    }

    // 修改数据范围
    handleChange(values: any[], nodes: any[]) {
        this.dataRangeForm.dataGovernments = nodes.map(
            (cur: any) => cur.data.id
        );
    }

    // 提交调整部门
    async saveSetDepartment() {
        if (!this.newSetDepartmentId) {
            this.$message.error("请选择要调整到的新部门");
            return false;
        }
        const res = await this.$server["org/member/setDepartment"]({
            data: {
                id: this.nowSetId,
                departmentId: this.newSetDepartmentId
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            this.checkTableSelected(this.nowSetId);
            this.closeSetDepartment();
            await this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 修改表格选中状态
    checkTableSelected(id: any) {
        const oldList = this.batchList;
        (this.$refs.multipleTable as any).clearSelection();
        const rowIndex = oldList.findIndex((item: any) => item.id === id);
        if (rowIndex !== -1) {
            oldList.splice(rowIndex, 1);
        }
        oldList.forEach((item: any) => {
            (this.$refs.multipleTable as any).toggleRowSelection(item, true);
        });
    }

    // 选择成员部门
    clickSetNode(data: any) {
        this.newSetDepartmentId = data.id;
    }

    // 获取表格数据
    async getTable() {
        if (!this.orgId) return false;
        const res = await this.$server["org/getMember"]({
            data: {
                departmentId: this.orgId,
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                name: this.name
            },
            loader: false
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 编辑成员
    handleEdit(row: any) {
        const node = (this.$refs.OrgTree as any).getNode(this.orgId);
        this.$router.push({
            path: "/organization/edit",
            query: {
                orgId: this.orgId,
                id: row.id,
                departmentName: node.data.name
            }
        });
    }

    // 表格操作
    operateMember(row: any, type: string) {
        const tips: string =
            type === "freeze"
                ? "账号冻结后，无法再做任何操作，确定要冻结吗？"
                : type === "unfreeze"
                    ? "确定要恢复该账号的功能吗？"
                    : "确定删除该账号吗？";
        const title: string =
            type === "freeze" ? "冻结" : type === "unfreeze" ? "解冻" : "删除";
        this.$confirm(tips, title, {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(() => {
                this.toOperation(row.id, type, title);
            })
            .catch();
    }

    // 成员操作
    async toOperation(id: string | number, type: string, title: string) {
        const url = `org/member/${type}`;
        const res = await this.$server[url]({
            data: {
                id
            }
        });
        if (res.data.code === 200) {
            this.$message({
                type: "success",
                message: `${title}成功!`
            });
            if (type === "delete") {
                this.checkTableSelected(id);
            }
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 调整数据范围
    showRange() {
        this.showRangeDialog = true;
    }

    // 关闭数据范围
    closeRangeDialog() {
        this.showRangeDialog = false;
        (this.$refs.dataRangeForm as any).resetFields();
        this.dataRangeForm.dataRange = [];
        this.dataRangeForm.dataGovernments = [];
    }

    // 保存数据范围
    saveRange() {
        (this.$refs.dataRangeForm as any).validate(async(valid: any) => {
            if (valid) {
                this.showRangeDialog = false;
                this.$server["org/setDataRange"]({
                    data: {
                        ids: this.batchList.map((item: any) => item.id),
                        governmentIds: this.dataRangeForm.dataGovernments
                    }
                })
                    .then((res: any) => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: "success",
                                message: `数据范围修改成功!`
                            });
                            this.closeRangeDialog();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                    .catch();
            }
        });
    }

    handleItem(payload: any) {
        const { data, onlyName } = payload;
        dialogDepartment({
            model: {
                id: data.id || "",
                name: data.name || "",
                phone: data.tel || "",
                desc: data.description || ""
            },
            onlyName: onlyName,
            close: () => {
                (this.$refs.OrgTree as any).closeInput();
            },
            sure: async(vm: any, model: any) => {
                (this.$refs.OrgTree as any).addDepartment({
                    id: model.id,
                    name: model.name,
                    tel: model.phone,
                    description: model.desc,
                    tier: data.tier,
                    parentId: data.parentId
                });
                this.$nextTick(() => {
                    vm.close();
                });
            }
        });
    }

    setPrincipal() {
        dialogPrincipal({
            onopen: async(vm: any) => {
                vm.loader(true);
                const res = await this.$server["org/memberListNotPage"]({
                    data: {
                        // departmentId: this.orgId === "ALL_DEPARTMENT" ? "" : this.orgId,
                        departmentId: this.orgId
                    },
                    loader: false
                });
                vm.loader(false);
                if (res.data.code === 200) {
                    const { departmentAdmin, userVos } = res.data.data || {};
                    vm.initData(
                        departmentAdmin && departmentAdmin.id
                            ? departmentAdmin.id
                            : "",
                        (userVos || []).map((cur: any) => {
                            return {
                                label: cur.name || "",
                                value: cur.id ? cur.id + "" : ""
                            };
                        })
                    );
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            },
            sure: async(vm: any, model: any) => {
                vm.loader(true);
                const { id } = this.currentNode;
                const response: any = await this.$server["org/addUpdate"]({
                    data: {
                        id,
                        adminId: model.value
                    }
                });
                vm.loader(false);
                if (response.data.code === 200) {
                    vm.close();
                    this.getTree();
                } else {
                    this.$message.error(
                        response.data.message || "接口请求错误!"
                    );
                }
            }
        });
    }
}
</script>

<style scoped lang="scss">
.org-container {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    .container-left {
        width: 3rem;
        flex: 0 0 auto;
        .filter-input {
            width: 1.3rem;
            margin-right: 10px;
        }
        .container-left-body {
            background: #fff;
            margin-left: 4px;
            height: 100%;
            padding: 10px;
            .add-btn {
                float: right;
                margin-bottom: 14px;
            }

            .scroll-box {
                max-height: calc(100% - 56px);
                overflow-y: auto;
                clear: both;
            }
        }
    }
    .container-right {
        margin-left: 0.1rem;
        width: calc(100% - 3.1rem);
        height: calc(100% - 8px);
        .container-right-body {
            height: calc(100% - 120px);
            margin-top: 10px;
        }
        .pbf-pagination {
            margin-top: 0.2rem;
            text-align: right;
        }
        .change-password-container {
            margin: 0;
        }
    }
}
.set-department {
    .set-department-container {
        width: 80%;
        margin: 0 auto;
        .title {
            text-align: center;
            margin-bottom: 0.3rem;
            span {
                display: inline-block;
                font-size: 0.22rem;
                font-weight: 600;
                text-align: center;
                padding-bottom: 0.04rem;
                border-bottom: 2px solid $password-confirm-prompt-text;
            }
        }
        .old {
            font-size: 0.14rem;
        }
        .new {
            font-size: 0.14rem;
            color: #ababab;
        }
        .scroll-box {
            margin: 0 auto;
            max-height: 60vh;
            overflow: auto;
            border: 1px solid #bbb;
            border-radius: 4px;
            padding: 8px;
        }
    }
}
</style>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
    }
    .page-base-footer {
        width: 100%;
        min-width: unset !important;
    }
}
.change-password-container {
    margin-top: 0.6rem;
    .title {
        text-align: center;
        margin-bottom: 0.3rem;
        span {
            display: inline-block;
            font-size: 0.22rem;
            font-weight: 600;
            text-align: center;
            padding-bottom: 0.04rem;
            border-bottom: 2px solid $password-confirm-prompt-text;
        }
    }
    .change-password-form {
        width: 4rem;
        margin: 0 auto;
        ::v-deep {
            .cf__group {
                padding-bottom: 0.1rem;
            }
            .cf__group.error {
                padding-bottom: 0.3rem;
            }
            .cf__group-info {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 1px solid #dcdcdc;
                i {
                    font-size: 0.18rem;
                    color: $password-confirm-prompt-text;
                }
                .el-input__inner {
                    border: 0;
                    border-radius: 0;
                    line-height: 0.14rem;
                    font-size: 0.14rem;
                    padding-left: 0.1rem;
                    border-left: 1px solid $password-confirm-prompt-text;
                    height: 0.14rem;
                    margin-left: 0.1rem;
                    width: 100%;
                }
                .el-input__suffix {
                    right: 16px;
                }
            }
            .cf__group-tips {
                bottom: 0;
            }
        }
    }
}
::v-deep {
    .reset-popup.el-dialog {
        width: 4rem;
        .resetPassword-btn {
            text-align: right;
            padding-top: 0.1rem;
        }
        .change-password-container .change-password-form {
            width: 90%;
            padding: 0;
        }
    }
}

.set-department-footer {
    padding-right: 44px;
}
</style>
